/*
Document   : medias
Created on : 03/01/2014, 11:41:18
Author     : fran
Description:
Purpose of the stylesheet follows.
*/

/* From 480px and up */
@media (min-width: 481px){
    /*BANNERS*/
    section[role="banner"]{
        /*MAIN BANNER*/
        &.main-banner{
            height: 560px;
            /* BRAND IN PHONE*/
            .brand-small{
                display: none;
            }
        }
        /*SECONDARY BANNER*/
        &.secondary-banner{
            height: 400px;
        }
        /* TITULAR BANNER */
        h3{
            font-size: 2.5em;
        }
    }
    
    /* BLUE BUTTON */
    .blue-button{
        margin-top: 30px;
        height: 60px;
        line-height: 60px;
    }
}

@media (min-width: 641px){
    /* NAV */
    .top-nav{
        height: 60px;
        margin-top: 0;
        .brand{
            display: block;
            height: 60px;
            padding: 5px 15px;
            img{
                height: 100%;
                width: auto;
            }
        }
        .nav-menu{
            float: right;
            height: 50px;
            li{
                display: inline-block;
                border-bottom: none;
            }
            a{
                height: 60px;
                line-height: 60px;
                &.brand-small{
                    display: none;
                }
            }
        }
        &.index{
            padding-top: 35px;
        }
        #toggle-menu{
            display: none;
        }
        &.active{
            padding-top: 0;
        }
        &.index.open:not(.active){
            background-color: transparent;
        }
        &:not(.index) + [role="contentinfo"]{
            margin-top: 60px;
        }
    }
    .recent-news .news-box .news-container {
        min-height: 323px;
    }
}
@media (min-width: 1121px){
    section[role="banner"]{
        &.main-banner{
            height: 720px;
        }
        &.secondary-banner{
            height: 550px;
        }
    }
}